import { Button, Upload, UploadProps } from 'antd'
import { CloudUploadOutlined } from '@ant-design/icons'

import React from 'react'
import { useTranslation } from 'react-i18next';

import styled from '@emotion/styled';
import AgentServer from '@/modules/Agent';


const FooterContainer = styled.div`
    display: flex;
    justify-content: space-between;
    align-items: center;
`;

const UploadBtn = styled(Button)`
    border: none;
    text-align: left;
    box-shadow: none;
    padding:  0px;
`;




const UpoladFooter = (props: { cancel: () => void, submit: () => void, beforeUpload: (file: any) => void, }) => {

    const { t } = useTranslation();

    const beforeUpload = async (file: any) => {
        props.beforeUpload(file);
    }

    return (
        <FooterContainer>
            <Upload customRequest={() => { }} {...props} accept={'image/*'} beforeUpload={beforeUpload} multiple={false} showUploadList={false}>
                <p style={{ textAlign: 'left' }}><UploadBtn icon={<CloudUploadOutlined />}>{t('upload')}</UploadBtn></p>
                <p>{t('upload-img-format')}</p>
            </Upload>
            <div className='submit'>
                <Button type="default" onClick={props.cancel}>{t('cancel')}</Button>
                <Button type="primary" onClick={props.submit}>{t('sure')}</Button>
            </div>
        </FooterContainer>
    )
}

export default UpoladFooter